<!--
 * @Descripttion: --
 * @Author: zhoujj
 * @Date: 2021-07-05 15:50:32
 * @LastEditors: zhoujj
 * @LastEditTime: 2022-05-24 15:24:48
-->
<template>
  <div>
    <transition name="left">
      <!-- 菜单背景图 -->
      <aside class="left" :style="{ width: isCollapse ? '96px' : '210px' }">
        <router-link to="/main">
          <img
            v-if="env === 'local'"
            src="../assets/images/logo_nav.png"
            :class="isCollapse ? 'logo_nav_left' : 'logo_nav'"
            alt=""
          />
          <img
            v-else
            src="../assets/images/login_bg.png"
            :class="isCollapse ? 'logo_nav_left' : 'logo_nav'"
            alt=""
          />
        </router-link>
        <p class="sys_name" v-if="!isCollapse && env === 'local'">xxxx</p>
        <!-- 导 航 -->
        <el-menu
          :default-active="currentRoute"
          :collapse="isCollapse"
          @select="handleSelect"
          router
          unique-opened
          class="el-menu-vertical-demo"
        >
          <template
            v-for="info in menuList"
            :style="{ width: isCollapse ? '96px' : '210px' }"
          >
            <el-submenu
              :index="info.route"
              :key="info.id"
              v-if="info.children.length !== 0 && info.selected"
            >
              <template slot="title">
                <div :class="isCollapse ? 'collapseMenuIcon' : ''">
                  <img
                    class="menu-icon"
                    :src="elMenuIcon(info)"
                    alt="菜单图标"
                  />
                  <span>{{ info.name }}</span>
                </div>
              </template>
              <template v-for="item in info.children">
                <el-menu-item
                  :index="item.route"
                  :key="item.id"
                  v-if="item.selected"
                  >{{ item.name }}</el-menu-item
                >
              </template>
            </el-submenu>

            <el-menu-item
              :index="info.route"
              :key="info.id"
              v-if="info.children.length === 0 && info.selected"
            >
              <span slot="title">{{ info.name }}</span>
            </el-menu-item>
          </template>
        </el-menu>
      </aside>
    </transition>
    <img
      class="hideMenuButton"
      v-if="!isCollapse"
      @click="isCollapse = true"
      src="../assets/images/tabLeft.png"
      alt=""
    />
    <img
      class="showMenuButton"
      v-else
      @click="isCollapse = false"
      src="../assets/images/tabRight.png"
      alt=""
    />
  </div>
</template>

<script>
/**
 * Author：     yangjc
 * CreateTime： 2020-02-20
 * updateTime： 2020-03-10
 * Desc：左侧菜单组件
 */
    import session from '../utils/session'
    import { mapGetters, mapMutations } from 'vuex'
    export default {
        data () {
            return {
                env: process.env.NODE_ENV,
                menuList: session.get('authorities'),
                currentMenu: '',
                isCollapse: false, // 是否展开菜单
                tags: [], // 当前面包屑数据
                curMenu: null // 当前点击路由对象
            }
        },
        computed: {
            currentRoute () {
                return this.$route.fullPath
            },
            // 一级菜单icon
            // elMenuIcon () {
            // return false
            //     return (info) => {
            //         if (info.route) {
            //             return this.currentMenu === info.route
            //                 ? require(`../assets/images/leftMenu${info.route}-active.png`)
            //                 : require(`../assets/images/leftMenu${info.route}.png`)
            //         } else {
            //             return ''
            //         }
            //     }
            // },
            ...mapGetters(['source', 'btnPer', 'vuexTags'])
        },
        watch: {
            // 监听路由变化
            $route (to, from) {
                // 获取权限按钮数据
                let source = this.source
                source.map((item) => {
                    if (to.path === item.route) {
                        this.setBtnPer(item.authorBtn)
                        session.set('btnPer', item.authorBtn)
                    }
                })
                this.getMenuItem(this.menuList, to.path)
                let tags = this.vuexTags ? this.vuexTags : this.tags
                const hash = {}
                tags = [...tags, this.curMenu]
                const newArr = tags.reduce((item, next) => {
                    if (hash[next.name]) {
                        hash[next.name] = ''
                    } else {
                        hash[next.name] = true && item.push(next)
                    }
                    return item
                }, [])
                this.tags = newArr

                session.set('tags', this.tags)
                this.$emit('getTags', this.tags)
                this.setTags(this.tags)
            },
            isCollapse (val) {
                this.$emit('getCollapse', val)
            }
        },
        methods: {
            ...mapMutations({
                setBtnPer: 'btnPer',
                setTags: 'tags'
            }),
            // 递归算法，查询级联菜单树
            getMenuItem (data, toPath) {
                for (let i = 0; i < data.length; i++) {
                    if (data[i].route === toPath) {
                        // 匹配到路由，可用于添加面包屑
                        this.curMenu = data[i]
                        return
                    } else {
                        // 未匹配到，继续往子节点找
                        if (data[i].children) {
                            this.getMenuItem(data[i].children, toPath)
                        }
                    }
                }
                // console.log(this.menuList)
            },
            handleSelect (key, keyPath) {
                this.currentMenu = keyPath[0]
                session.set('parentMenu', this.currentMenu)
            }
        },
        mounted () {
            this.$emit('getTags', this.vuexTags)
            // 刷新页面默认父级路由地址
            this.currentMenu = session.get('parentMenu')

            console.log('当前菜单---', session.get('authorities'))
        }
    }
</script>
<style scoped>
.menu-icon {
  margin-right: 15px;
}
.collapseMenuIcon {
  text-align: center;
  margin-left: 10px;
}</style
>>
